<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">资金管理</block>
		</cu-custom>
		<view class="cont-top"></view>
		<view class="cont-top fixed-top" :style="[{top:CustomBar+'px'}]">
			<view class="item" :class="changeIndex==1?'active':''" @click="change(1)">
				资金池明细
			</view>
			<view class=""></view>
			<view class="item" :class="changeIndex==2?'active':''" @click="change(2)">
				店铺转盘
			</view>
		</view>

		<view class="capital-pool" v-if="changeIndex==1">
			<view class="title">
				<text>资金池汇总</text>
				<text>(余额：¥{{poolZoom.award_money}})</text>
			</view>
			<view class="zoom-pool">
				<view class="">
					<text class="text-white">资金池总额</text>
					<text class="text-white text-price">{{poolZoom.award_total}}</text>
				</view>
				<view class="">
					<text class="text-white">抽奖红包</text>
					<text class="text-white text-price">{{poolZoom.red_money_total}}</text>
				</view>
				<view class="">
					<text class="text-white">消费红包</text>
					<text class="text-white text-price">{{poolZoom.consumer_total}}</text>
				</view>
				<view class="">
					<text class="text-white">退还红包</text>
					<text class="text-white text-price">{{poolZoom.back_total}}</text>
				</view>
			</view>
			<view class="desc">
				<text>*</text>
				<text>资金池总金额=抽奖金额+消费金额+资金池余额-退还红包</text>
			</view>
			<view class="cont-show" id="cont-show" :style="[{minHeight: minHeight+'px'}]">
				<view class="head-tit">
					<image class="rili" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/calendar.png" mode=""></image>
					<text>请选择时间</text>
					<view class="">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<text>{{nowDate}}</text>
							<image class="guide" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/qiao-lower-triangle.png"
							 mode=""></image>
						</picker>
					</view>
				</view>
				<view class="pool-detail">
					<view class="tabs">
						<view class="tab" v-for="(item,index) in pollDetail" :key="index" @click="selectIndex" :data-index="index">
							<text :class="item.isLight?'light':''">{{item.labe}}</text>
							<text v-if="item.isLight"></text>
						</view>
					</view>
					<view class="show-list" v-for="(item,index) in pollDetail" :key="index" v-if="item.isLight">
						<view class="pool-item" v-for="(jtem,j) in item.list" :key="j">
							<image class="avatar" :src="jtem.headimg" mode="" v-if="index==2"></image>
							<view class="info">
								<text>{{index==3?'转盘抽奖红包退还':index==1?'红包抽奖':index ==0?'订单:'+jtem.order_sn:jtem.user_name}}</text>
								<text>{{jtem.create_time}}</text>
							</view>
							<view class="price">
								<text v-if="index==0 || index==3">+</text>
								<text v-if="index==2 || index==1">-</text>
								<text class="text-colorP">{{jtem.money}}</text>
							</view>
						</view>
						<no-content :showType="'data'" v-if="item.noCont" :tips="'没有查询到数据，切换分类或时间试试~'"></no-content>
						<tui-divider width="60%" :gradual="true" v-if="item.list.length>0">没有更多了~</tui-divider>
					</view>
				</view>
			</view>
		</view>

		<view class="turntable" v-if="changeIndex==2">
			<view class="head-tit fixed-date" :style="[{top:CustomBar+48+'px'}]">
				<image class="rili" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/calendar.png" mode=""></image>
				<text>请选择时间</text>
				<view class="">
					<picker mode="date" :end="endDate" fields="month" @change="bindDateWheelChange">
						<text>{{dateWheel}}</text>
						<image class="guide" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/qiao-lower-triangle.png" mode=""></image>
					</picker>
				</view>
			</view>
			<view class="head-tit" style="height: 100rpx"></view>
			<view class="title">
				<text>转盘红包汇总</text>
			</view>
			<view class="zoom-pool">
				<view class="">
					<text class="text-white">红包总额</text>
					<text class="text-white text-price">{{wheelObject.total_money}}</text>
				</view>
				<view class="">
					<text class="text-white">红包数量</text>
					<text class="text-white">{{wheelObject.total_number}}个</text>
				</view>
				<view class="">
					<text class="text-white">已抽红包</text>
					<text class="text-white">{{wheelObject.draw_number}}个</text>
				</view>
				<view class="">
					<text class="text-white">实抽金额</text>
					<text class="text-white text-price">{{wheelObject.draw_money}}</text>
				</view>
			</view>
			<view class="desc">
				<text>*</text>
				<text>退还红包=抽奖红包金额-实抽金额</text>
			</view>
			<view class="wheel-item" v-for="(item,index) in wheelList" :key="index">
				<view class="first">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Lucky-draw.png" mode=""></image>
					<text>{{item.packet_order_str}}</text>
				</view>
				<view class="seconed">
					<view class="">
						<text>红包总额</text>
						<text class="text-price">{{item.total_money}}</text>
					</view>
					<view class="">
						<text>红包数量</text>
						<text>{{item.total_number}}个</text>
					</view>
					<view class="">
						<text>已抽红包</text>
						<text>{{item.draw_number}}个</text>
					</view>
					<view class="">
						<text>实抽金额</text>
						<text class="text-price">{{item.draw_money}}</text>
					</view>
				</view>
			</view>
			<no-content :showType="'data'" v-if="noWheelCont" :tips="'没有查询到数据，切换月份试试~'"></no-content>
			<tui-divider width="60%" :gradual="true" v-if="wheelList.length>0">没有更多了~</tui-divider>
		</view>
	</view>
</template>

<script>
	import noContent from "./component/noContent.vue"
	var untils = require('@/utils/util.js');
	export default {
		components: {
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar, 
				changeIndex: 1,
				nowDate: '',
				endDate: '',
				pollDetail: [{
						labe: '订单流入',
						list: [],
						isLight: true,
						lastPage: '',
						page: 1,
						noCont: false
					},
					{
						labe: '抽奖红包',
						list: [],
						isLight: false,
						lastPage: '',
						page: 1,
						noCont: false
					},
					{
						labe: '消费红包',
						list: [],
						isLight: false,
						lastPage: '',
						page: 1,
						noCont: false
					},
					{
						labe: '退还红包',
						list: [],
						isLight: false,
						lastPage: '',
						page: 1,
						noCont: false
					},
				],
				showList: [],
				businessId: '',
				poolZoom: {
					award_money: "",
					award_total: 0,
					back_total: 0,
					consumer_total: 0,
					red_money_total: 0
				},
				minHeight: '',

				// 转盘
				dateWheel: '',
				wheelpage: 1,
				wheelLstPage: '',
				wheelList: [],
				wheelObject: {
					draw_money: '',
					draw_number: '',
					total_number: '',
					total_money: '',
				},
				noWheelCont: false
			}
		},
		// 加载更多
		onReachBottom() {
			var that = this
			var changeIndex = that.changeIndex
			if (changeIndex == 1) {
				var pollDetail = this.pollDetail
				var index = 0
				pollDetail.forEach((item, i) => {
					if (item.isLight) {
						index = i
					}
				})

				if (pollDetail[index].page > pollDetail[index].lastPage) {
					return
				}

				switch (index) {
					case 0:
						// , that.getRedPacketDataLog(), that.getRedPacket(), that.getRedPackeBack()
						Promise.all([that.getPoolList()]).then((
							result) => {
							var status = result.filter(item => item.status != 1)
							if (status.length == 0) {
								pollDetail[index]['list'] = pollDetail[index]['list'].concat(result[0].data.data);
								pollDetail[index]['lastPage'] = result[0].data.pageCount;
								pollDetail[index]['page']++;
								uni.hideLoading()
							} else {
								uni.showToast({
									title: '网络有误',
									icon: 'none'
								})
							}
						}).catch((error) => {
							console.log(error)
						})
						break
					case 1:
						Promise.all([that.getRedPacketDataLog()]).then((
							result) => {
							var status = result.filter(item => item.status != 1)
							if (status.length == 0) {
								pollDetail[index]['list'] = pollDetail[index]['list'].concat(result[0].data.data);
								pollDetail[index]['lastPage'] = result[0].data.pageCount;
								pollDetail[index]['page']++;
								uni.hideLoading()
							} else {
								uni.showToast({
									title: '网络有误',
									icon: 'none'
								})
							}
						}).catch((error) => {
							console.log(error)
						})
						break
					case 2:
						Promise.all([that.getRedPacket()]).then((
							result) => {
							var status = result.filter(item => item.status != 1)
							if (status.length == 0) {
								pollDetail[index]['list'] = pollDetail[index]['list'].concat(result[0].data.data);
								pollDetail[index]['lastPage'] = result[0].data.pageCount;
								pollDetail[index]['page']++;
								uni.hideLoading()
							} else {
								uni.showToast({
									title: '网络有误',
									icon: 'none'
								})
							}
						}).catch((error) => {
							console.log(error)
						})
						break
					case 3:
						Promise.all([that.getRedPackeBack()]).then((
							result) => {
							var status = result.filter(item => item.status != 1)
							if (status.length == 0) {
								pollDetail[index]['list'] = pollDetail[index]['list'].concat(result[0].data.data);
								pollDetail[index]['lastPage'] = result[0].data.pageCount;
								pollDetail[index]['page']++;
								uni.hideLoading()
							} else {
								uni.showToast({
									title: '网络有误',
									icon: 'none'
								})
							}
						}).catch((error) => {
							console.log(error)
						})
						break
				}
			} else {
				if (that.wheelpage > that.wheelLstPage) {
					return
				}

				that.getWheel()
			}
		},
		methods: {
			// 切换元素
			selectIndex(e) {
				var that = this
				that.pollDetail.forEach((item, index) => {
					item.isLight = false
					if (index == e.currentTarget.dataset.index) {
						item.isLight = true
						if (item.list.length == 0) {
							item.noCont = true
						} else {
							item.noCont = false
						}
					}
				})
			},
			getZoom() {
				var that = this;
				this.$request({
					url: '/AwardPool/count_record',
					data: {
						business_id: that.businessId
					},
					success: res => {
						if (res.data.status == 1) {
							that.poolZoom = res.data.data
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			change(index) {
				this.changeIndex = index
			},
			bindDateWheelChange(e) {
				var time = e.detail.value
				this.dateWheel = time
				this.getWheel(1)
			},
			bindDateChange(e) {
				var time = e.detail.value
				this.nowDate = time.split(' ')[0]
				this.getList(1)
			},
			// 获取转盘总数据
			getWheelZoom() {
				var that = this
				that.$request({
					url: '/RedPacketStatistics/count_record',
					data: {
						business_id: that.businessId
					},
					success: res => {
						if (res.data.status == 1) {
							that.wheelObject = res.data.data
						}
					},
					fail: (e) => {},
					complete: () => {}
				});

			},
			// 获取转盘抽奖记录
			getWheel(status) {
				var that = this
				if (status == 1) {
					that.wheelList = []
					that.noWheelCont = false
					that.wheelpage = 1
				}
				that.$request({
					url: '/RedPacketStatistics/get_list',
					data: {
						business_id: that.businessId,
						page: that.wheelpage,
						month: that.dateWheel
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.pageCount == 0 && that.wheelpage == 1) {
								that.noWheelCont = true
							} else {
								that.noWheelCont = false
							}
							that.wheelList = that.wheelList.concat(res.data.data.data)
							that.wheelpage++
							that.wheelLstPage = res.data.data.pageCount
						} else {

						}
					},
					fail: (e) => {},
					complete: () => {}
				});

			},
			getPoolList() {
				var that = this
				return new Promise(function(resolve, reject) {
					that.$request({
						url: '/AwardPoolIn/get_list',
						data: {
							business_id: that.businessId,
							page: that.pollDetail[0].page,
							day: that.nowDate
						},
						success: res => {
							if (res.data.status == 1) {
								resolve(res.data) //在异步操作成功时调用
							} else {
								reject(res); //在异步操作失败时调用
							}
						},
						fail: (e) => {
							reject(e); //在异步操作失败时调用
						},
						complete: () => {}
					});
				})
			},
			getRedPacket() {
				var that = this
				return new Promise(function(resolve, reject) {
					that.$request({
						url: '/RedPacket/get_list',
						data: {
							business_id: that.businessId,
							page: that.pollDetail[1].page,
							day: that.nowDate
						},
						success: res => {
							if (res.data.status == 1) {
								resolve(res.data) //在异步操作成功时调用
							} else {
								reject(res); //在异步操作失败时调用
							}
						},
						fail: (e) => {
							reject(e); //在异步操作失败时调用
						},
						complete: () => {}
					});
				})
			},
			getRedPackeBack() {
				var that = this
				return new Promise(function(resolve, reject) {
					that.$request({
						url: '/RedPacketDataBack/get_list',
						data: {
							business_id: that.businessId,
							page: that.pollDetail[2].page,
							day: that.nowDate
						},
						success: res => {
							if (res.data.status == 1) {
								resolve(res.data) //在异步操作成功时调用
							} else {
								reject(res); //在异步操作失败时调用
							}
						},
						fail: (e) => {
							reject(e); //在异步操作失败时调用
						},
						complete: () => {}
					});
				})
			},
			getRedPacketDataLog() {
				var that = this
				return new Promise(function(resolve, reject) {
					that.$request({
						url: '/RedPacketDataLog/get_list',
						data: {
							business_id: that.businessId,
							page: that.pollDetail[3].page,
							day: that.nowDate
						},
						success: res => {
							if (res.data.status == 1) {
								resolve(res.data) //在异步操作成功时调用
							} else {
								reject(res); //在异步操作失败时调用
							}
						},
						fail: (e) => {
							reject(e); //在异步操作失败时调用
						},
						complete: () => {}
					});
				})
			},

			getList(status) {
				var that = this
				if (status == 1) {
					that.pollDetail.forEach(item => {
						item['list'] = []
						item['noCont'] = false
						item['page'] = 1
						item['lastPage'] = ''
					})
				}
				// 获取资金池四个列表
				Promise.all([that.getPoolList(), that.getRedPacketDataLog(), that.getRedPacket(), that.getRedPackeBack()]).then((
					result) => {
					console.log(result)
					var status = result.filter(item => item.status != 1)
					if (status.length == 0) {
						result.forEach((item, i) => {
							that.pollDetail.forEach((jtem, j) => {
								if (i == j) {
									if (item.data.pageCount == 0 && jtem['page'] == 1) {
										jtem['noCont'] = true
									} else {
										jtem['noCont'] = false
									}
									jtem['list'] = jtem['list'].concat(item.data.data);
									jtem['lastPage'] = item.data.pageCount;
									jtem['page']++;
								}
							})
						})
						console.log(that.pollDetail)
						uni.hideLoading()
					} else {
						uni.showToast({
							title: '网络有误',
							icon: 'none'
						})
					}
				}).catch((error) => {
					console.log(error)
				})
			}

		},
		onLoad() {
			var that = this
			var time = untils.formatDateTime(new Date().getTime())
			this.nowDate = time.split(' ')[0]
			this.endDate = time.split(' ')[0]
			var wheel = time.split(' ')[0]
			this.dateWheel = wheel.split('-')[0] + '-' + wheel.split('-')[1]

			this.businessId = uni.getStorageSync('userInfo').business_id
			// 获取资金池总计
			this.getZoom()
			// 获取资金池四个列表
			this.getList()
			// 转盘数据
			this.getWheelZoom()
			this.getWheel()

			setTimeout(function() {
				uni.getSystemInfo({
					success: (res) => {
						uni.createSelectorQuery().select("#cont-show").boundingClientRect().exec(rect => {
							that.minHeight = res.windowHeight - rect[0].top
						})
					}
				})

			}, 20)
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
	}
</script>

<style scoped>
	.fixed-top {
		position: fixed;
		left: 0;
		z-index: 9;
		border-top: solid 1rpx #efefef;
		border-bottom: solid 1rpx #efefef;
	}

	.cont-top {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		background: #fff;
	}

	.cont-top .item {
		flex: 1;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.cont-top .item.active {
		color: #F34930;
	}

	.cont-top>view:nth-child(2) {
		width: 2rpx;
		height: 48rpx;
		background-color: #efefef;
	}

	.capital-pool {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.title {
		display: flex;
		height: 100rpx;
		/* align-items: center; */
	}

	.title text:nth-child(1) {
		line-height: 100rpx;
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}

	.title text:nth-child(2) {
		line-height: 100rpx;
		font-size: 28rpx;
		color: #666;
	}

	.desc {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
	}

	.desc>text:nth-child(1) {
		color: #F34930;
		font-size: 30rpx;
		line-height: 80rpx;
	}

	.desc>text:nth-child(2) {
		font-size: 24rpx;
		color: #999999;
		line-height: 80rpx;
	}

	.zoom-pool {
		width: 100%;
		height: 138rpx;
		background-image: linear-gradient(0deg,
			#f34930 0%,
			#ff8573 100%);
		box-shadow: 2rpx 4rpx 10rpx 0rpx rgba(204, 41, 17, 0.5);
		border-radius: 8rpx;
		display: flex;
	}

	.zoom-pool>view {
		flex: 1;
		height: 138rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.zoom-pool>view>text:nth-child(1) {
		font-size: 28rpx;
	}

	.zoom-pool>view>text:nth-child(2) {
		font-size: 30rpx;
	}

	.cont-show {
		width: 100%;
		background: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.fixed-date {
		background: #fff;
		padding: 35rpx 24rpx !important;
		position: fixed;
		/* top: 0; */
		left: 0;
		z-index: 9;
	}

	.head-tit {
		padding: 35rpx 0;
		width: 100%;
		display: flex;
		border-bottom: solid 1rpx #efefef;
	}

	.head-tit .rili {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.head-tit text:nth-child(2) {
		flex: 1;
		font-size: 30rpx;
		color: #999999;
	}

	.head-tit view:nth-child(3) {
		width: 200rpx;
		position: relative;
	}

	.head-tit view:nth-child(3)>picker {
		width: 200rpx;
		position: relative;
		display: flex;
		justify-content: flex-end;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.head-tit view:nth-child(3)>picker>text {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;

	}

	.head-tit view:nth-child(3) .guide {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 12rpx;
		height: 12rpx;
	}

	.tabs {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
	}

	.tabs>.tab {
		flex: 1;
		height: 70rpx;
		position: relative;
		display: flex;
	}

	.tabs>.tab>text:nth-child(1) {
		line-height: 50rpx;
		font-size: 30rpx;
		color: #333333;
		text-align: center;
		display: block;
		width: 100%;
	}

	.tabs>.tab>text:nth-child(2) {
		width: 120rpx;
		height: 5rpx;
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-60rpx);
		background: #F34930;
		border-radius: 8rpx;

	}

	.tabs>.tab .light {
		color: #F34930;
		font-weight: bold;
	}

	.show-list {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.show-list .pool-item:first-child {
		padding-top: 0 !important;
	}

	.pool-item {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
	}

	.pool-item .avatar {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;
	}

	.pool-item .info {
		flex: 1;
		height: 64rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.pool-item .info>text:nth-child(1) {
		line-height: 48rpx;
		color: #333;
		font-size: 28rpx;
	}

	.pool-item .info>text:nth-child(2) {
		color: #999;
		font-size: 24rpx;
	}

	.pool-item .price>text {
		font-weight: bold;
		color: #F34930;
		font-size: 36rpx;
	}

	.pool-item .price>text:nth-child(1) {
		margin-right: 10rpx;
		font-weight: normal !important;
	}

	.turntable {
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	.wheel-item {
		width: 100%;
		height: 231rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.wheel-item .first {
		padding: 25rpx 0;
		display: flex;
		align-items: center;
		border-bottom: solid 1rpx #efefef;
	}

	.wheel-item .first image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx
	}

	.wheel-item .first text {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.wheel-item .seconed {
		width: 100%;
		display: flex;
		height: 138rpx;
	}

	.wheel-item .seconed>view {
		flex: 1;
		display: flex;
		height: 138rpx;
		justify-content: space-between;
		/* align-items: center; */
		flex-direction: column;
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.wheel-item .seconed>view>text:nth-child(1) {
		font-size: 28rpx;
		line-height: 34rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.wheel-item .seconed>view>text:nth-child(2) {
		font-size: 30rpx;
		color: #333333;
	}

	.wheel-item .seconed>view:last-child text:nth-child(2) {
		font-weight: bold;
	}
</style>
<style>
	page {
		background: #f5f5f5
	}
</style>
